<template>
  <div class="app-container">
    <!--账单管理-->
    <div class="top">
      <div class="bill-btn"><span class="active">全部对账单</span><span>未对帐账单</span></div>
      <div class="operating-area">
        <el-button type="primary" round style="width: 120px;height: 36px;margin-right: 18px">对账</el-button>
        <el-button type="primary" round style="width: 120px;height: 36px;margin-right: 18px">搜索</el-button>
        <el-input
          v-for="(item,index) in iptStyle"
          :key="index"
          style="width: 200px;height: 36px;margin-right: 10px;"
          :placeholder="item.str"
          :suffix-icon="item.icon"
        >
        </el-input>
      </div>
    </div>
    <div style="padding: 0 36px;">
      <div class="center">
        <h5 class="title">罗慕合作诊所/机构月度对账单</h5>
        <div class="baes-info">
          <span><b>公司名称：</b>上海诚恒医疗器械有限公司</span>
          <span>20190701V3版</span>
        </div>
        <div class="info-cont">
          <ul class="bill-information">
            <li><span class="name">对账日期</span><span class="text"></span></li>
            <li><span class="name">对账周期</span><span class="text"></span></li>
            <li><span class="name">增值税发票类型</span><span class="text"></span></li>
            <li><span class="name">罗慕合作诊所/就够系统账号</span><span class="text"></span></li>
            <li><span class="name">诊所/机构名称</span><span class="text"></span></li>
            <li><span class="name">诊所/机构电话</span><span class="text"></span></li>
            <li><span class="name">诊所/机构地址</span><span class="text"></span></li>
            <li><span class="name">发票公司名称</span><span class="text"></span></li>
            <li><span class="name">统一社会信用代码</span><span class="text"></span></li>
            <li><span class="name">发票项目</span><span class="text"></span></li>
            <li><span class="name">发票类型</span><span class="text"></span></li>
          </ul>
          <ul class="bill-information">
            <li><span class="name">发票备注</span><span class="text">火警电话几乎都记得很久很久的哈哈接电话回家霍建华结婚很久很久</span></li>
            <li><span class="name">经营地址</span><span class="text"></span></li>
            <li><span class="name">经营电话</span><span class="text"></span></li>
            <li><span class="name">开户行</span><span class="text"></span></li>
            <li><span class="name">银行账号</span><span class="text"></span></li>
            <li><span class="name">发票寄送地址</span><span class="text"></span></li>
            <li><span class="name">发票收件人姓名</span><span class="text"></span></li>
            <li><span class="name">发票收件人电话</span><span class="text"></span></li>
            <li><span class="name">电子发票接收邮箱</span><span class="text"></span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="total">
      <span class="total-left">本期共5个待核对账单</span>
      <span class="total-right">共计：22500元</span>
    </div>
    <div class="bottom">
      <el-table ref="table" :data="tableData" size="small" style="width: 100%;">
        <el-table-column prop="blocId" width="159" label="订单编号"></el-table-column>
        <el-table-column prop="blocId" width="159" label="患者姓名"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="病例姓名"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="罗慕病历号"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="创建时间"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="第一副"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="第二副"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="疗程副数"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="已制作付数"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="剩余付数"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="金额"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="付款状态"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="发票"></el-table-column>
        <el-table-column prop="clinicNature" width="120" label="备注"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { billingQuery } from '@/api/oper';

export default {
  data() {
    return {
      iptStyle: [
        {
          str: '搜诊所/代理商名称、诊所/机构联系人、诊所/机构电话',
          icon: 'el-icon-search'
        },
        {
          str: '账单类型',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '诊所性质',
          icon: 'el-icon-arrow-down'
        }
      ],
      tableData: []
    };
  },
  created() {
    billingQuery().then(res => {
      console.log(res, '0000000');
      this.tableData = res.content;
    });
  },
  methods: {
    blocDetail(row) {
      this.$router.push('details');
    }
  }
};
</script>

<style lang="scss" scoped>
    .top {
        width: 100%;
        height: 125px;
        border-bottom: 1px solid #ccc;
    }
    .bill-btn {
        width: 190px;
        height: 36px;
        border-radius: 18px;
        background: #D8E4F6;

        span {
            display: inline-block;
            width: 94px;
            font-size: 14px;
            color: #508FCC;
            text-align: center;
            line-height: 36px;
        }
        .active {
            border: 1px solid #D8E4F6;
            border-radius: 18px;
            background: #fff;
        }
    }

    .operating-area {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 27px;
    }

    .center {
        padding: 0 36px 36px;
        box-shadow: 0px 20px 16px rgba(216, 228, 246, 0.6);
        .title {
            height: 58px;
            line-height: 58px;
            margin: 0;
            border-bottom: 1px solid #E6E6E6;;
            text-align: center;
        }
        .baes-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 59px;
        }
        .info-cont {
            padding: 32px 0;
            background: #F1F2F6;
        }
        .info-cont {
            display: flex;
            justify-content: space-between;
        }
        .bill-information {
            width: 50%;
            &:first-child {
                border-right: 1px solid #D8E4F6;
            }
            li {
                display: flex;
                justify-content: space-between;
                width: 100%;
                margin-bottom: 20px;
                list-style-type:none;
                line-height: 22px;
                &:last-child {
                    margin: 0;
                }
                .name {
                    display: inline-block;
                    width: 207px;
                    text-align: right;
                    font-size: 14px;
                    font-weight: bold;
                    color: #333;
                }
                .text {
                    display: inline-block;
                    width: 364px;
                    margin-left: 12px;
                    font-size: 14px;
                    color: #666;
                }
            }
        }
    }

    .total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 32px;
        font-size: 14px;
        .total-left {
            font-weight: bold;
            color: #333;
        }
        .total-right {
            color: #666;
        }
    }

    .bottom {
        margin-top: 20px;
    }
</style>
